﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dribble Ball</title>
    <link rel="stylesheet" href="../css/db.css" />
    <link rel="stylesheet" href="../css/colorbox.css" />
     <script type="text/javascript" src="../js/track.js"/>
</head>
<body>
    <div id="status">
        <div id="counter">
        </div>
    </div>
    <div id="win">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            width="2000" height="600" version="1.1">
            <radialGradient id="grad1" cx="20%" cy="30%" r="100%">
                <stop offset="0%" style="stop-color: rgb(255,255,255); stop-opacity: 0" />
                <stop offset="100%" style="stop-color: #F5D06C; stop-opacity: 0.4" />
            </radialGradient>
            <radialGradient id="light" cx="100" cy="100" r="800" gradientUnits="userSpaceOnUse">
                <stop id="s1" offset="0%" style="stop-color: #090909;" stop-opacity="1" />
                <stop id="s2" offset="100%" style="stop-color: #090909; stop-opacity: 1" />
            </radialGradient>
            <defs>
                <marker id="mTriangle" markerWidth="50" markerHeight="100" refX="50" refY="50" orient="auto">
                    <path d="M 0 0 50 50 0 100 Z" style="fill: black;" />
                </marker>
            </defs>
            <g id="back">
                <rect width="100%" height="100%" fill="url(#grad1)" />
                <image id="fireworks" transform="translate(100 100)" class="target" xlink:href=""
                    x="-80" y="-80" height="160" width="160" />
            </g>
            <g id="main">
                <line x1="0" y1="600" x2="2000" y2="600" db-pad="ground" />
                <g transform="translate(400 100)" db-cat="reward" />
                <circle cx="400" cy="400" r="40" db-pad="bad" />
                <circle cx="400" cy="520" r="40" db-pad="bad" />
                <circle cx="800" cy="280" r="40" db-pad="bad" />
                <circle cx="800" cy="400" r="40" db-pad="bad" />
                <circle cx="800" cy="520" r="40" db-pad="bad" />
                <circle cx="1480" cy="-220" r="350" db-pad="wood" />
                <g transform="translate(710 200)" db-cat="reward" />
                <line x1="1400" y1="250" x2="1560" y2="250" db-cat="target" />
                <line x2="1400" y2="255" x1="1560" y1="255" db-pad="wood" />
                <circle cx="1400" cy="250" r="6" db-pad="wood" />
                <circle cx="1560" cy="250" r="6" db-pad="wood" />
            </g>
            <path id="mask" fill-rule="evenodd" fill="url(#light)" />
            <rect id="dummy" width="100%" height="100%" opacity="0">
            </rect>
            <g id="front">
            </g>
        </svg>
    </div>
    <div id="skip">
        &lt;&lt; Skip Preview
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.countdown.js"></script>
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../js/svg.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function () {
            db.path = [{ x: 0, y: 300 }, { x: 2000, y: 300}];

            triggers.gameStarted = function (e) {
                setfireworks();
                setInterval(setfireworks, 8000);
            }

            triggers.ballMoved = function (e) {
                $("#mask").attr({
                    d: "M0 0L0 600L2000 600L2000 0L0 0 M " + e.position.x + " " + (e.position.y - 80) + " a 80 80 0 1 0 0.001 0"
                });
            }

            var fireworks = $("#fireworks");

            function setfireworks() {
                var left = $("#win").scrollLeft();

                var x = Math.random() * 800 + left;
                var y = Math.random() * 120;
                fireworks.attr("xlink:href", "../img/fireworks2.gif");
                fireworks.setTranslate(x, y);
                fireworks.attr("visibility", "visible");

                $("#light").attr({ cx: x, cy: y });

                var opacity34 = 1;

                $("#s1").attr("stop-opacity", opacity34);



                var interval1 = setInterval(function () {
                    opacity34 -= 0.006;
                    if (opacity34 <= 0) {
                        $("#s1").attr("stop-opacity", 0);
                        clearInterval(interval1);
                        //s1.remove();
                        fireworks.attr("visibility", "hidden");
                        fireworks.attr("xlink:href", "../img/fireworks2");
                        var interval2 = setInterval(function () {
                            opacity34 += 0.008;

                            if (opacity34 >= 1) {
                                clearInterval(interval2);
                            }
                            else {
                                $("#s1").attr("stop-opacity", opacity34);
                            }
                        }, 20);

                    }
                    else {

                        $("#s1").attr("stop-opacity", opacity34);
                    }
                }, 20);
            }

            //            highlightDesign();
            startGame();
        });
        //]]>
    </script>
</body>
</html>
